<template>
  <div class="school_infs">
    <Card>
      <p slot="title">
        <Icon type="navicon-round"></Icon>
        报告统计
      </p>
      <Row type="flex" justify="space-between">
        <div>
          <div class="db_inline">
            班级：
            <Select v-model="searchparam.clazzId" style="width:140px" @on-change="queryFn">
              <Option v-for="item in clazzList" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </div>
          学生：
          <Input v-model="searchparam.name" @on-change="queryFn" placeholder="学生姓名关键字"
                 style="width: 100px;margin-right: 4px;"/>
          IC卡：
          <Input v-model="searchparam.icCard" @on-change="queryFn" placeholder="学生IC卡号"
                 style="width: 100px;margin-right: 4px;"/>
          <div class="db_inline">
            日期：
            <DatePicker type="date" placeholder="日期选择" v-model="bTime" @on-change="bTimeChangeFn"
                        style="width: 110px"></DatePicker>
          </div>
          <span @click="restFn">
              			<Button type="ghost"><Icon type="refresh"></Icon>刷新</Button>
        			</span>
        </div>
        <div class="control">
          <Button @click="exportRecordFn" type="info">
            <Icon type="navicon" size="20"></Icon>
            <span>导出</span>
          </Button>
          <slot name="operation"></slot>
        </div>
      </Row>
      <Row class="margin-top-10">
        <Table height="685" ref="backgroundTable" :columns="dataColumns" :data="dataTable"></Table>
      </Row>
      <Row type="flex" justify="end" class="footer">
        <div class="margin-top-10">
          <Page :total="searchparam.total" :current="searchparam.current" :page-size="searchparam.size"
                @on-change="pageChange" show-elevator></Page>
        </div>
      </Row>
    </Card>
    <Modal v-model="detail.visible" :title="detail.title" width="350px">
      <img class="report_avatar" :src="detail.avatar"/>
    </Modal>
  </div>
</template>

<script>
  import API from "@/api/api";
  import VmBtable from "@/components/vm/vm-btable";
  import vueUpload from "@/components/views/upload/uploadPicture";
  import Operation from "iview/src/components/transfer/operation";
  import moment from 'moment';

  export default {
    name: "Background",
    components: {
      Operation,
      VmBtable,
      vueUpload,
    },
    data() {
      return {
        searchTitle: '',
        clazzList: [],
        statusList: [],
        bTime: '',
        searchparam: {
          current: 1,
          size: 20,
          name: '',
          icCard: '',
          clazzId: '',
          bTime: '',
        },
        dataColumns: [{
          type: 'index',
          title: '序号',
          align: 'center',
          width: 60
        },
          {
            title: '班级',
            key: 'className',
            width: 180,
            align: 'center',
            render: (h, param) => {
              return h('div', {}, param.row.gradeName + '-' + param.row.className);
            }
          },
          {
            title: '学生名',
            key: 'name',
            align: 'center',
          },
          {
            title: 'IC卡',
            key: 'icCard',
            align: 'center',
          },
          {
            title: '入园时间',
            key: 'reportTime',
            sortable: true,
            sortType: 'desc',
            align: 'center',
          },
          {
            title: '身高(cm)',
            key: 'height',
            align: 'center',
          },
          {
            title: '体重(kg)',
            key: 'weight',
            align: 'center',
          },
          {
            title: '体温(℃)',
            key: 'temperature',
            align: 'center',
            render: (h, param) => {
              return h('div', {}, param.row.temperature + '(' + param.row.temperatureStatus + ')')
            }
          },
          {
            title: 'BMI',
            key: 'bmi',
            align: 'center',
          },
          {
            title: '操作',
            align: 'center',
            render: (h, params) => {
              let btn = [];
              let detailBtn = h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.detailFn(params.row)
                  }
                }
              }, '入园相片');
              btn.push(detailBtn);
              return h('div', btn);
            }
          }
        ],
        dataTable: [],
        detail: {
          visible: false,
          title: '',
          avatar: '',
        }
      }
    },
    methods: {
      queryFn() {
        API.fetchReport(this.searchparam).then(resp => {
          this.dataTable = resp.records;
          this.searchparam.total = resp.total;
        })
      },
      getClazzFn() {
        API.fetchAllClazz().then(resp => {
          this.clazzList.push({
            id: ' ',
            name: '-全部-'
          });
          for (let i in resp.data) {
            this.clazzList.push(resp.data[i]);
          }
        })
      },
      bTimeChangeFn(date, type) {
        if (date) {
          this.searchparam.bTime = moment(date).format('YYYY-MM-DD')
        } else {
          this.searchparam.bTime = '';
        }
        this.queryFn();
      },
      pageChange(val) {
        this.searchparam.current = val;
        this.queryFn();
      },
      detailFn(data) {
        this.detail.visible = true;
        this.detail.title = data.name + ' ' + data.reportTime + '入园相片';
        this.detail.avatar = this.qiniu.domain + data.avatar;
      },
      restFn() {
        this.searchparam.name = '';
        this.bTime = '';
        this.eTime = '';
        this.searchparam.bTime = '';
        this.searchparam.clazzId = '';
        this.searchparam.current = 1;
        this.queryFn();
      },
      exportRecordFn(){
        this.$Modal.confirm({
          title: '提示',
          content: '是否导出符合筛选条件的考勤数据？',
          onOk: () => {
            API.exportRecord(this.searchparam);
          },
          onCancel: () => {

          }
        })
      },
      cancelFn() {
      },
      complete() {
      },
      submitFn() {
      },
    },
    mounted() {
      this.queryFn();
      this.getClazzFn();
    }
  }
</script>

<style scoped>
  .report_avatar{
    width: 100%;
  }
</style>
